import React, { lazy } from "react";
import { Navigate } from "react-router-dom";
import { ErrorBlock } from "antd-mobile";
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from "antd-mobile-icons";

const MainLayout = lazy(() => import("../pages/MainLayout"));
const Login = lazy(() => import("../pages/Login"));
const Register = lazy(() => import("../pages/Register"));
const Home = lazy(() => import("../pages/Home"));
const Order = lazy(() => import("../pages/Order"));
const Message = lazy(() => import("../pages/Message"));
const My = lazy(() => import("../pages/My"));
const Detail = lazy(() => import("../pages/Detail"));
const City = lazy(() => import("../pages/City"));
const List = lazy(() => import("../pages/List"));

//定义二级路由表
export const TabbarChildrenRoutes = [
  {
    path: "/home",
    element: <Home></Home>,
    icon: <AppOutline></AppOutline>,
    title: "首页",
  },
  {
    path: "/order",
    element: <Order></Order>,
    icon: <UnorderedListOutline></UnorderedListOutline>,
    title: "订单",
  },
  {
    path: "/message",
    element: <Message></Message>,
    icon: <MessageFill></MessageFill>,
    title: "消息",
  },
  {
    path: "/my",
    element: <My></My>,
    icon: <UserOutline></UserOutline>,
    title: "我的",
  },
];

//定义一级路由表
export const routes = [
  {
    path: "/",
    element: <MainLayout></MainLayout>,
    children: [
      ...TabbarChildrenRoutes,
      {
        path: "/",
        element: <Navigate to="/home"></Navigate>,
      },
    ],
  },
  {
    path: "/login",
    element: <Login></Login>,
  },
  {
    path: "/register",
    element: <Register></Register>,
  },
  {
    path: "/detail/:id",
    element: <Detail></Detail>,
  },
  {
    path: "/city/:type",
    element: <City></City>,
  },
  {
    path: "/list",
    element: <List></List>,
  },
  {
    path: "*",
    element: <ErrorBlock fullPage />,
  },
];
